.security-rating {
	padding: 0 2rem 2rem 2rem;

	.header {
		display: flex;

		.level-text {
			line-height: 1;
		}

		.label {
			display: flex;
			flex: 1;
			align-items: flex-end;
			padding-bottom: 0.5rem;
			color: var(--color-text-0);
		}
		.rate-wapper {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.75rem;
			height: 4rem;
			color: var(--color-nav-text-active);
			font-size: var(--text-xxl);
		}
		.rate-wapper::after {
			position: absolute;
			bottom: 0;
			display: block;
			width: 0;
			height: 0;
			border-right: 1.375rem solid transparent;
			border-bottom: 0.75rem solid #fff;
			border-left: 1.375rem solid transparent;
			content: '';
		}
	}

	.rule {
		margin-left: 0.5rem;
		color: var(--color-primary);
		font-size: var(--text-sm);
		line-height: 1;
		cursor: pointer;
	}

	.desc-wapper {
		display: flex;
		padding: 1rem 0;

		.soldier {
			width: 4.75rem;
		}
		.text {
			display: flex;
			flex: 1;
			flex-direction: column;
			padding-left: 2rem;

			.level {
				color: var(--color-text-0);
				font-size: calc(var(--text-xl) - 2px);
			}

			.desc {
				display: flex;
				flex: 1 0 0;
				align-items: center;
				font-size: var(--text-sm);
			}
		}
	}

	.wall {
		width: 22.25rem;
	}
}

.table {
	.smalltit {
		margin-bottom: 1.25rem;
		color: var(--color-text-0);
		font-size: var(--text-base-size);
	}
	.info {
		margin-top: 0.5rem;
		color: var(--color-text-2);
		font-size: var(--text-sm);
	}
	.close-btn {
		display: flex;
		justify-content: center;
		padding-top: 1.75rem;
	}
	.rank-rule {
		width: 100%;
		font-size: var(--text-sm);
		box-shadow: 0 0 0 1px var(--color-border-2);

		th {
			font-weight: normal;
			background: var(--color-bg-2);
		}

		th,
		td {
			padding: 0.5rem 1rem;

			& + td,
			& + th {
				border-left: 1px solid var(--color-border-2);
			}
		}

		td {
			border-top: 1px solid var(--color-border-2);
		}

		.suggest {
			max-width: 20em;
		}
	}
	.loseDetail {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
		color: var(--color-text-0);
		font-size: var(--text-base-size);
	}
	.head {
		display: flex;
		align-items: center;
		height: 2.25rem;
		font-size: 14px;
		background-color: var(--color-bg-2);
		border: 1px solid var(--color-border-2);
		border-radius: 2px 2px 0 0;
		span {
			height: 2.25rem;
			padding-left: 1.5rem;
			line-height: 2.25rem;
		}
	}
	.body {
		background-color: var(--color-bg-0);
		border-top: none;
		border-radius: 0;
	}
	.head span:first-child {
		width: 10rem;
		border-right: 1px solid var(--color-border-2);
	}
	.head span:nth-child(n + 2) {
		width: 10rem;
	}
	.head span:last-child {
		width: 22.5rem;
		border-left: 1px solid var(--color-border-2);
	}
	a:hover {
		text-decoration: none;
	}
	.detail {
		display: flex;
		height: 2.25rem;
		font-size: var(--text-sm);
		background-color: var(--color-bg-2);
		border: 1px solid var(--color-border-2);
		border-radius: 2px 2px 0 0;
		span {
			height: 2.25rem;
			padding-left: 1.5rem;
			line-height: 2.25rem;
		}
	}
	.weakness {
		height: 7.75rem;
		background-color: var(--color-bg-0);
		border-top: 0;
		border-radius: 0;
		span {
			height: 7.75rem;
			line-height: 5.75rem;
		}
	}
	.suggest {
		padding-top: 0.5rem;
		line-height: 1.25rem !important;
	}
	.securi {
		padding-top: 1.25rem;
		line-height: 1.25rem !important;
	}
	.types {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		padding-left: 1.5rem;
	}
	.detail span:first-child {
		width: 6.75rem;
		border-right: 1px solid var(--color-border-2);
	}
	.detail span:nth-child(n + 2) {
		width: 6.75rem;
		border-right: 1px solid var(--color-border-2);
	}
	.detail span:nth-child(n + 3) {
		width: 20rem;
		border-right: 1px solid var(--color-border-2);
	}
	.weakness div {
		width: 20rem;
		border-right: 1px solid var(--color-border-2);
	}
	.detail span:last-child {
		width: 12.5rem;
	}
}
.fs12 {
	font-size: 12px;
	&>div{
		margin-bottom: 6px;
	}
}
